<!--商品列表-->

<template>
    <div>
        <!--条件搜索表单-->
        <el-form :inline="true" :model="form" ref="queryRef" class="demo-form-inline">
            <el-form-item label="商品编号" prop="goodsCode">
                <el-input v-model="form.goodsCode" placeholder="请输入商品编号" clearable @input="getGoodsList"></el-input>
            </el-form-item>

            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="form.goodsName" placeholder="请输入商品名称" clearable @input="getGoodsList" @keyup.enter.native="getGoodsList"></el-input>
            </el-form-item>

            <el-form-item label="商品种类" prop="goodsType">
                <el-input v-model="form.goodsType" readonly clearable placeholder="请选择商品种类" suffix-icon="el-icon-arrow-down"
                          @input="getGoodsList" @click.native="selectGoodsType"></el-input>
            </el-form-item>
            <!--真正的传参 typeId-->
            <el-form-item prop="typeId">

            </el-form-item>

            <el-form-item label="商品状态" prop="status">
                <el-select v-model="form.status" clearable placeholder="请选择商品状态" >
                    <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary"  @click="getGoodsList">查询</el-button>
                <el-button  @click="resetForm('queryRef')">重置</el-button>
                <el-button type="success"  icon="el-icon-plus" @click="handleAdd">添加商品</el-button>
            </el-form-item>
        </el-form> <!--// 条件搜索表单-->

        <!--商品列表-->
        <el-table :data="goodsList" style="width: 100%" height="540">
            <el-table-column fixed label="" type="selection" width="55"></el-table-column>
            <el-table-column prop="goodsCode" label="商品编码" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="220"></el-table-column>
            <el-table-column prop="status" label="商品状态" width="120"></el-table-column>
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="info"
                            @click="handleDetail(scope.$index, scope.row)">查看</el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

                    <el-popconfirm title="确认删除吗?"
                                   @confirm="handleDelete(scope.$index, scope.row)"
                                    style="margin-left: 10px">
                        <el-button
                                slot="reference"
                                size="mini"
                                type="danger">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table><!--/ 商品列表-->

        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination><!--/ 分页-->

        <!--商品种类弹出框-->
        <SelectGoodsType v-if="goodsTypeFlag" :checked="form.typeId" :goodsTypeList="goodsTypeList"
                         @close="selectGoodsType"></SelectGoodsType>

        <!--详情对话框-->
        <GoodsDetail v-if="detailFlag" :goods="goods" @close="handleDetail"></GoodsDetail>

        <!--编辑商品信息对话框-->
        <GoodsEdit v-if="editFlag" :goods="goods" :goodsTypeList="goodsTypeList" @close="handleEdit" ></GoodsEdit>

        <!--添加商品对话框-->
        <GoodsAdd v-if="addFlag" :goodsTypeList="goodsTypeList" :unit="unit" @close="handleAdd"></GoodsAdd>
    </div>
</template>

<script>
import SelectGoodsType from "../../../components/goodList/SelectGoodsType";
import GoodsDetail from "../../../components/goodList/GoodsDetail";
import GoodsEdit from "../../../components/goodList/GoodsEdit";
import GoodsAdd from "../../../components/goodList/GoodsAdd";

import API from '../../../api/api';
export default {
    name: "GoodsList",
    components: {
      SelectGoodsType, GoodsDetail, GoodsEdit, GoodsAdd
    },
    data () {
        return {
            // 商品详情对话框标志位
            detailFlag: false,
            // 修改商品标志位
            editFlag: false,
            // 添加商品标志位
            addFlag: false,
            // 商品种类弹出框标志位
            goodsTypeFlag: false,
            // 分页
            pageNum: 1,
            pageSize: 10,
            total: 100,
            // 组件之间传递数据
            goods: {},
            // 条件查询-展示的表单
            form: {
                goodsCode: '',
                goodsName: '',
                goodsType: '', // 用于展示
                typeId: '', // 真正有效参数(对象)
                status: '',
            },
            // 商品种类
            goodsTypeList: [
                // {typeId: '1', typeName: '酒', isDefault: '1'},
                // {typeId: '2', typeName: '冷饮', isDefault: '1'},
                // {typeId: '3', typeName: '热饮', isDefault: '1'},
                // {typeId: '4', typeName: '牛奶', isDefault: '1'},
            ],
            // 商品列表
            goodsList: [
                // {goodsCode: '0001', goodsName: '橙汁1', status: '1'},
                // {goodsCode: '0002', goodsName: '橙汁2', status: '1'},
                // {goodsCode: '0003', goodsName: '橙汁3', status: '1'},
                // {goodsCode: '0004', goodsName: '橙汁4', status: '1'},
                // {goodsCode: '0005', goodsName: '橙汁5', status: '1'},
                // {goodsCode: '0006', goodsName: '橙汁6', status: '1'},
                // {goodsCode: '0007', goodsName: '橙汁7', status: '1'},
                // {goodsCode: '0008', goodsName: '橙汁8', status: '1'},
                // {goodsCode: '0009', goodsName: '橙汁9', status: '1'},
                // {goodsCode: '0010', goodsName: '橙汁a', status: '1'},
            ],
            // 商品状态
            status: [
                {value: 1, label: '可用'},
                {value: 0, label: '不可用'}
            ],
            // 单位
            unit: [

            ],
        }
    },
    mounted() {
        this.getGoodsUnit();
        this.getGoodsTypeList();
        this.getGoodsList();
    },
    methods: {
        // 单位查询
        getGoodsUnit() {
            let url = API.unit.selectUnitList;
            this.$get(url, {}).then(res => {
                let data = res.data;
                if (data.success) {
                    this.unit = data.data.list;
                }
            }).catch( err => {
                this.$message.error("请求失败!");
            })
        },
        // 商品种类查询
        getGoodsTypeList() {
            let url = API.type.selectTypeList;
            this.$post(url, {}).then(res => {
                const data = res.data;
                console.log(data, '商品种类查询-----------');
                if (data.success) {
                    this.goodsTypeList = data.data.list;
                }
            }).catch(err => {

            });
        },
        // 商品列表查询
        getGoodsList() {

            // let {goodsType, ...goodsQuery} = Object.assign({}, this.form);
            let goodsQuery = {};
            goodsQuery.param = {...this.form}
            if (goodsQuery.param.typeId) {
                goodsQuery.param.typeId = goodsQuery.param.typeId.map(t => {return t.typeId}).toString();
            }
            goodsQuery.pageNum = this.pageNum;
            goodsQuery.pageSize = this.pageSize;
            console.log(goodsQuery, '条件查询param');
            let url = API.goods.selectList;
            this.$post(url, goodsQuery).then(res => {
                let data = res.data;
                console.log(data.list, '商品列表查询响应----------');

                if (data.success) {
                    this.goodsList = data.data.list;
                    this.goodsList.map(item => {
                       item.status = item.status === 1? '可用':'不可用';
                    });
                    console.log(this.goodsList, 'goodsList-------------');
                    this.total = data.data.total;
                }
            })

        },
        // 重置表单
        resetForm(ref) {
            this.$refs[ref].resetFields();
            this.pageNum = 1;
            this.pageSize = 10;
            this.getGoodsList();
        },
        // 打开或关闭对话框
        selectGoodsType(goodsType) {
            console.log((!this.goodsTypeFlag? '"打开"':'"关闭"')+'选择种类对话框----------');
            console.log(goodsType, "goodsType------------------");
            if (goodsType instanceof Array) {
                this.form.goodsType = goodsType.map(t => {return t.typeName}).toString();
                this.form.typeId = goodsType;
                console.log(this.form.goodsType, 'form.goodsType----------------');
                console.log(this.form.typeId, 'form.typeId----------------');

            } else if (goodsType instanceof Array && goodsType.length === 0) {
                this.form.typeId = [];
                this.form.goodsType = '';
            }

            this.goodsTypeFlag = !this.goodsTypeFlag;
        },
        // 详情-操作按钮
        handleDetail(index, row) {
            this.detailFlag = !this.detailFlag;
            this.goods = row;
            console.log(index, row, '详情-----------------');
        },
        // 编辑-操作按钮
        handleEdit(index, row) {
            this.editFlag = !this.editFlag;
            if (!this.editFlag) {
                this.getGoodsList();
            }
            this.goods = row;
            console.log(index, row, '===========this.goods');
        },
        // 删除-操作按钮
        handleDelete(index, row) {
            console.log('删除按钮===========');
            let url = API.goods.remove;
            let goodsDTO = {goodsCodeList: []};
            goodsDTO.goodsCodeList.push(row.goodsCode);
            this.$post(url, goodsDTO).then(res => {
                let data = res.data;
                if (data.success) {
                    this.$message.closeAll();
                    this.$message({
                        type: "success",
                        message: data.msg,
                        showClose: true,
                    });
                    this.getGoodsList();
                } else {
                    this.$message.error(data.msg);
                }
            }).catch(err => {
                this.$message.error("请求失败!");
            });
            console.log(index, row);
        },
        // 添加商品按钮
        handleAdd() {
            this.addFlag = !this.addFlag;
            if (!this.addFlag) {
                this.getGoodsList();
            }
        },
        // 分页
        handleSizeChange(val) {
            this.pageSize = val;
            this.getGoodsList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getGoodsList();
            console.log(`当前页: ${val}`);
        }

    }
}
</script>

<style lang="scss" scoped>

    /deep/.el-input__inner{
        height: 35px;
        line-height: 20px;
    }
</style>
